<template>
    <el-checkbox-group
        v-model="formData[item.prop]"
        :min="item.min"
        :max="item.max"
    >
        <el-checkbox
            v-for="option in options"
            :key="option[optionsKey.value]"
            :label="option[optionsKey.value]"
            :disabled="isBan"
            :style="item.style"
            @change="change"
        >
            {{ option[optionsKey.label] }}
        </el-checkbox>
    </el-checkbox-group>
</template>

<script>
import { useFormProps, changeItem } from './useFormProps'
import { defineComponent, computed } from 'vue'
export default defineComponent({
    name: 'UseCheck',
    props: useFormProps,
    emits: ['event'],
    setup(props, context) {
        const change = () => {
            changeItem(context, props)
        }
        const options = computed(() => props.item.options)
        const isBan = computed(() => props.readonly || props.item.readonly || props.disabled || props.item.disabled)
        return {
            change,
            options,
            isBan
        }
    }
})
</script>

<style lang="scss" scoped></style>
